<template>
  <div class="box1">
    <div class="message" :data="yonghu">
      <div class="box2">
        <el-avatar class="pic" :size="50" :src="image"></el-avatar>
        <div class="name">
          <a >{{ this.yonghu.mgname }}</a>
          <a>,你好！</a>
        </div>
        <div class="btn">
          <el-button type="primary" class="editmesssage" @click="showEditDialog"
            >修改个人信息</el-button
          >
          <el-button type="primary" class="editpwd" @click="showpwdEditDialog"
            >修改密码</el-button
          >
        </div>
      </div>
      <div class="box3">
        <el-descriptions title="用户信息" :data="yonghu">
          <el-descriptions-item label="姓名">{{
            this.yonghu.mgname
          }}</el-descriptions-item>
          <el-descriptions-item label="用户名">{{
            this.user.username
          }}</el-descriptions-item>
          <el-descriptions-item label="性别">
            <a v-if="this.yonghu.mgsex == '1'">男</a>
            <a v-if="this.yonghu.mgsex == '2'">女</a>
          </el-descriptions-item>
          <el-descriptions-item label="年龄">{{
            this.yonghu.mgage
          }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{
            this.yonghu.mgidcard
          }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{
            this.yonghu.mgphone
          }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{
            this.yonghu.mgemail
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!--修改用户的对话框  -->
    <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%">
      <el-form
        :model="yonghu"
        :rules="yonghuRules"
        ref="yonghuRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="上传图片">
          <el-upload
            class="avatar-uploader"
            :action="uploadURL"
            :auto-upload="autoUpload"
            name="imgFile"
            :show-file-list="false"
            :on-success="editManagerhandleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="姓名" prop="mgname">
          <el-input v-model="yonghu.mgname"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="mgage">
          <el-input-number
            v-model="yonghu.mgage"
            controls-position="right"
            :min="1"
            :max="100"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="性别" prop="mgsex">
          <el-radio v-model="yonghu.mgsex" label="1">男</el-radio>
          <el-radio v-model="yonghu.mgsex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="邮箱" prop="mgemail">
          <el-input v-model="yonghu.mgemail"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mgphone">
          <el-input v-model="yonghu.mgphone"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="mgidcard">
          <el-input v-model="yonghu.mgidcard"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editYonghuInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog
      title="修改密码"
      :visible.sync="editpwdDialogVisible"
      width="30%"
      @close="editPwdDialogClosed"
    >
      <el-form ref="editpwdRef" :rules="editPwdRules" :model="password">
        <el-form-item label="旧密码" prop="pwd1">
          <el-input
            placeholder="请输入密码"
            v-model="password.pwd1"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pwd2">
          <el-input
            placeholder="请输入密码"
            v-model="password.pwd2"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="再次输入" prop="pwd3">
          <el-input
            placeholder="请输入密码"
            v-model="password.pwd3"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editpwdDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editpwd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    //验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
      if (regEmail.test(value)) {
        // 合法的邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if (regMobile.test(value)) {
        return cb()
      }

      cb(new Error('请输入合法的手机号'))
    }
    // 验证身份证的规则
    var checkIdCard = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regIdCard = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9xX]$/
      if (regIdCard.test(value)) {
        return cb()
      }
      cb(new Error('请输入合法的身份证号'))
    }
    //验证第二次输入的新密码
    var checkPwd3 = (rule, value, cb) => {
      const regPwd3 = this.password.pwd2
      if (regPwd3 == value) {
        return cb()
      }
      cb(new Error('请输入相同新密码'))
    }
    return {
      autoUpload: true, //自动上传
      imageUrl: '', //模型数据，用于上传图片完成后图片预览
      // 上传图片的URL地址
      uploadURL: 'http://localhost:8787/yonghu/upload',
      yonghu: {},
      image: '', //头像路径
      user: '',
      editDialogVisible: false, //修改用户对话框
      editpwdDialogVisible: false, //修改密码对话框
      yonghuRules: {
        mgemail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' },
        ],
        mgmobile: [
          { required: true, message: '请输入手机', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' },
        ],
        mgidcard: [
          { required: true, message: '请输入身份证', trigger: 'blur' },
          { validator: checkIdCard, trigger: 'blur' },
        ],
      },
      editPwdRules: {
        pwd2: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 10,
            message: '密码的长度在6~15位之间',
            trigger: 'blur',
          },
        ],
        pwd3: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: checkPwd3, trigger: 'blur' },
        ],
      },
      password: {
        username: '',
        pwd1: '',
        pwd2: '',
        pwd3: '',
      },
    }
  },
  created() {
    this.getYonghu()
  },
  mounted() {},
  methods: {
    async getYonghu() {
      this.user = JSON.parse(window.sessionStorage.getItem('user'))
      const { data: res } = await this.$http.get(
        'userByUsername?username=' + this.user.username
      )
      if (res.meta.status != 200) return this.$message.error(res.meta.msg)
      this.yonghu = res.data
      console.log(this.yonghu);
        this.image = 'http://120.48.37.120:9000/parttime/' + this.yonghu.mgpic
        this.imageUrl='http://120.48.37.120:9000/parttime/' + this.yonghu.mgpic
    },
    showEditDialog() {
      this.getYonghu()
      this.editDialogVisible = true
    },
    showpwdEditDialog() {
      this.editpwdDialogVisible = true
    },
    //图片上传成功
    editManagerhandleAvatarSuccess(response, file) {
      //为模型数据imageUrl赋值 用于图片预览
      this.imageUrl = 'http://120.48.37.120:9000/parttime/' + response.data
      if (response.meta.status != 200) {
        this.$message.error('上传图片失败')
      }
      this.$message.success('上传图片成功')
      //设置模型数据（图片名称），后续提交ajax请求时会提交到后台最终保存到数据库
      this.yonghu.mgpic = response.data
    },
    //上传图片之前执行
    beforeAvatarUpload(file) {
      const isLt200M = file.size / 1024 / 1024 < 200
      if (!isLt200M) {
        this.$message.error('上传套餐图片大小不能超过 200MB!')
      }
      return isLt200M
    },
    editYonghuInfo() {
        this.$refs.yonghuRef.validate(async (valid) => {
          if (!valid) return
          //发起请求
          const { data: res } = await this.$http.put(
            'manager/' + this.yonghu.id,
            this.yonghu
          )
          if (res.meta.status != 200) {
            return this.$message.error('修改用户信息失败')
          }
          this.editDialogVisible = false
          this.getYonghu()
          this.$message.success('修改用户信息成功')
        })
    },
    editPwdDialogClosed() {
      this.$refs.editpwdRef.resetFields()
    },
    //改密码
    editpwd() {
      this.password.username = this.user.username
        this.$refs.editpwdRef.validate(async (valid) => {
          if (!valid) return
          //发起请求
          const { data: res } = await this.$http.get('updateManagerPwd', {
            params: this.password,
          })
          if (res.meta.status != 200) {
            return this.$message.error(res.meta.msg)
          }
          this.editpwdDialogVisible = false
          this.getYonghu()
          this.$message.success(res.meta.msg)
        })
    },
    handleClick() {},
  },
}
</script>

<style lang="less" scoped>
.box1 {
  width: 80%;
  margin: 0 auto;
  background-color: #fff;
  .message {
    width: 80%;
    height: 330px;
    float: left;
    margin: 20px 0 20px 20px;
    border-right: 1px solid beige;
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
  }
  .box2 {
    height: 120px;
    margin: 20px;
    .btn{
      width: 30%;
      float: right;
      margin-right: 15%;
      margin-top: 2%;
    }
  }
  .pic {
    float: left;
    margin: 10px;
    border-radius: 20px;
  }
  .name {
    float: left;
    margin: 10px;
    margin-top: 18px;
    font-size: 20px;
    font-weight: 900;
  }
  .menu {
    width: 13%;
    float: left;
    margin-left: 10px;
    .el-menu {
      margin-top: 40px;
      height: 200px;
      background-color: #fff;
    border-radius: 10px;

    }
  }
  .router{
      background-color: #fff;
      display: block;
    margin-left: 2%;
    border-radius: 20px;
    width: 80%;
    float: left;
    margin: 20px 0 20px 20px;
    border-right: 1px solid beige;
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
  }
  

}
</style>